<template>
	<view>
		<view class="searchContainer">
			<view class="searchItem" v-for="searchText in searchList" :key="searchText" @click="goDetail(searchText)">
				<image :src="searchText.img" mode="widthFix"></image>
				<view class="searchItemText">【保质期2021年7月了的你们不觉</view>
			</view>
		</view>
		<view class="loading" v-if="loadingType === 'loading'">加载中...</view>
		<view class="loading" v-if="loadingType === 'more'">下拉加载更多</view>
		<view class="loading" v-if="loadingType === 'loaded'">没有更多了</view>
	</view>
</template>

<script setup>
	import { search } from '@/api'
	import { ref, reactive } from 'vue'
	import {
		onLoad,onReachBottom
	} from "@dcloudio/uni-app"
	let searchList = ref([])
	let searchParams = reactive({
		keyword: '',
		limit:10,
		skip:0
	})
	let loadingType = ref('more')
	// 去商品详情
	function goDetail(like) {
		let { _id } = like
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?goods=${_id}`
		})
	}
	// 获取搜索列表
	async function getSearchList() {
		loadingType.value = 'loading'
		searchParams.skip = searchList.value.length
		let result = await search.reqSearch(searchParams)
		if(result.code === 1) {
			let res = searchList.value
			res.push(...result.data)
			searchList.value = res
			if(result.count <= searchList.value.length) {
				loadingType.value = 'loaded'
			}else {
				loadingType.value = 'more'
			}
		}
	}
	// 下拉加载
	onReachBottom(() => {
		if(loadingType.value === 'more') {
			getSearchList()
		}
	})
	onLoad(options => {
		let {keyword} = options
		searchParams.keyword = keyword
		getSearchList()
	})
</script>

<style lang="scss">
.searchContainer{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10rpx 20rpx;
	.searchItem{
		width: 48%;
		margin-top: 15rpx;
		image{
			width: 100%;
		}
	}
	.searchItemText{
		width: 100%;
		font-size: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.loading{
	text-align: center;
	padding-bottom: 15rpx;
}
</style>
